<template>
  <div id="sub-app-a"></div>
  <router-link to="/">Go MainApp Home</router-link>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

let subAppInstance = null;

const mountSubAppA = async () => {
  try {
    if (subAppInstance) {
      subAppInstance.unmount();
    }
    const SubAppAModule = await import('../../../sub-app-a/src/main');
    SubAppAModule.mount('#sub-app-a');
  } catch (error) {
    console.error('Failed to load SubAppA:', error);
  }
};

onMounted(() => {
  mountSubAppA()
});

onUnmounted(() => {
  if (subAppInstance) {
    subAppInstance.unmount();
  }
});
</script>



